<template>
    <view class="wanl-order-list u-flex-col">
        <!--        <view class="navbar">
            <view class="nav-item text-df" v-for="(item, index) in navList" :key="item.state"
                :class="{ current: tabCurrentIndex === index }" @tap="tabClick(index)">
                {{ item.text }}({{item.count}})
            </view>
        </view> -->
        <view>
          
            <goods-tabs :list="navTitleList" :is-scroll="true" v-model="tabCurrentIndex" name="text_show"></goods-tabs>
        </view>
        <swiper :current="tabCurrentIndex" style="flex: 1;" duration="300" @change="changeTab" class="swiperBox">
			<swiper-item class="tab-content" v-for="(tag, key) in navList" :key="tag.state">
                <scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
                    <!-- 空白页 -->
                    <wanl-empty text="没有找到任何商品" v-if="tag.loaded === true && tag.list.length === 0" />
                    <!-- 订单列表 -->
                    <block v-if="tag.list.length > 0">
                        <view class="u-p-t-16" v-for="(goods, index) in tag.list" :key="index">
                            <!-- 商品选择 -->
                            <view class="wanl-cart-goods u-flex-col padding-bj" style="align-items: stretch;">
                                <view class="text-xxl margin-right-sm u-flex" @tap="choose(goods, index)" v-if="false">
                                    <text v-if="goods.checked" class="wlIcon-xuanze-danxuan wanl-orange"></text>
                                    <text v-else class="wlIcon-xuanze wanl-gray-light"></text>
                                </view>

                                <view class="u-flex" style="align-items: stretch;">
                                    <view class="picture" @tap="onGoods(goods.goods_id)">
                                        <image :src="$wanlshop.oss(goods.image, 100, 100, 1)" mode="aspectFill"
                                            class="picture"></image>
                                    </view>

                                    <view class="content u-flex-col u-row-between u-m-l-16 u-flex-1"
                                        style="align-items: stretch;">
                                        <view class="text-cut-2 wanl-gray-dark title u-line-2 u-font-48"
                                            @tap="onGoods(goods.goods_id)">
                                            {{ goods.title }}
                                        </view>
                                        <view class="count u-flex">
                                            <view>库存{{ goods.stock }}</view>
                                            <view class="u-m-l-16">销量{{ goods.sales }}</view>
                                        </view>
                                        <view class="text-cut-2 wanl-gray-dark wanl-orange u-flex price"
                                            style="align-items: baseline;" @tap="onGoods(goods.goods_id)">
                                            <view>￥</view>
                                            <view class="value u-font-xl4">{{ goods.price }}</view>
                                        </view>
                                    </view>
                                </view>
                                <view class="action u-flex m-shop u-m-t-24">
                                    <view class="btn border-color" @click="normal_a(goods, index)"
                                        v-if="tag.state == 3 || tag.state == 4">上架</view>
                                    <view class="btn border-color" @click="hidden_a(goods, index)">下架</view>
                                    <view class="btn border-color" @click="remove_a(goods, index)">删除</view>
                                </view>
                            </view>
                        </view>
                    </block>
                    <uni-load-more :status="tag.loadingType" :content-text="contentText" />
                    <view class="edgeInsetBottom"></view>
                </scroll-view>
            </swiper-item>
        </swiper>

        <view v-if="false">
            <view class="wanl-cart-foot" style="background: #F7F7F7;;"></view>
            <view class="wanl-cart-foot fixedView solid-top account u-flex u-row-right"
                style="justify-content: flex-end;">
                <button class="cu-btn round bg-gradual-orange">去结算</button>
                <button class="cu-btn round bg-gradual-orange">去结算</button>
                <button class="cu-btn round bg-gradual-orange">去结算</button>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                tabCurrentIndex: 1,
                navList: [{
                        state: 0,
                        text: '已上架',
                        text_show: '已上架',
                        key: 'normal',
                        loadingType: 'more',
                        current_page: 1,
                        list: []
                    },
                    {
                        state: 1,
                        text: '待审核',
                        text_show: '待审核',
                        key: 'examine',
                        loadingType: 'more',
                        current_page: 1,
                        list: []
                    },
                    {
                        state: 2,
                        text: '已售罄',
                        text_show: '已售罄',
                        key: 'sell_out',
                        loadingType: 'more',
                        current_page: 1,
                        list: []
                    },
                    {
                        state: 3,
                        text: '未上架',
                        text_show: '未上架',
                        key: 'hidden',
                        loadingType: 'more',
                        current_page: 1,
                        list: []
                    },
                    {
                        state: 4,
                        text: '被驳回',
                        text_show: '被驳回',
                        key: 'refuse',
                        loadingType: 'more',
                        current_page: 1,
                        list: []
                    }
                    // ,{
                    // 	state: 7,
                    // 	text: '已关闭',
                    // 	loadingType: 'more',
                    // 	current_page: 1,
                    // 	orderList: []
                    // }
                ],

                navTitleList: [{
                        state: 0,
                        text: '反馈广场',
                        text_show: '反馈广场',
                        key: 'normal',
                        loadingType: 'more',
                        current_page: 1,
                        list: []
                    },
                    {
                        state: 1,
                        text: '我的反馈',
                        text_show: '我的反馈',
                        key: 'examine',
                        loadingType: 'more',
                        current_page: 1,
                        list: []
                    },
             
                   
                ],
                contentText: {
                    contentdown: ' ',
                    contentrefresh: '正在加载...',
                    contentnomore: ''
                },
                cart: {
                    status: 0,
                    allsum: 0,
                },
                chooseList: [],
                ts: 0,
                keyword: ''
            };
        },
        onLoad(options) {
            if (!options.state) {
                options.state = 0;
            }

            // // #ifndef MP
            // this.loadData();
            // // #endif
            // // #ifdef MP
            // if (options.state == 0) {
            //     this.loadData();
            // }
            // // #endif
            this.$api.get({
                url: '/store/product/productList',
                data: {},
                success: res => {
                    // this.navTitleList.forEach(item => {
                    //     item.count = res[item.key + "_count"];
                    //     item.text_show = `${item.text}(${item.count})`
                    // })
                    // this.tabCurrentIndex = +options.state;
                    this.loadData('tabChange');

                }
            });

        },
        onShow() {
        
        },
        methods: {
            //获取订单列表
            loadData(source) {
                //这里是将订单挂载到tab列表下
              
                let index = this.tabCurrentIndex;
                let navItem = this.navList[index];
                let state = navItem.state;
                let status = navItem.key
                console.log('loadData',index,navItem);

                //判断是否最后一页
                if (navItem.loadingType == 'noMore') {
                    return;
                }

                //tab切换只有第一次需要加载数据
                if (source === 'tabChange' && navItem.loaded === true) {
                    return;
                }
                //防止重复加载
                if (navItem.loadingType === 'loading') {
                    return;
                }
                navItem.loadingType = 'loading';
                let data = {
                    status: status,
                    page: navItem.current_page
                }
                if (this.keyword.length > 0) {
                    data['title'] = this.keyword
                }

                console.log('d')
                // 获取列表
                this.$api.get({
                    url: '/store/product/productList',
                    data: data,
                    success: res => {
                        // this.navList.forEach(item => {
                        //     item.count = res[item.key + "_count"];
                        //     item.text_show = `${item.text}(${item.count})`
                        // })
                        navItem.current_page = res.data.current_page; //当前页码
                        if (res.last_page === res.data.current_page) {
                            navItem.loadingType = 'noMore';
                        } else {
                            navItem.loadingType = 'more';
                            navItem.current_page++;
                        }
                        console.log(res)
                        let orderList = res.data.data;
                        orderList.forEach(item => {
                            navItem.list.push(item);
                        });
                        console.log(navItem)
                        //loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
                        this.$set(navItem, 'loaded', true);
                    }
                });
            },

            //swiper 切换
            changeTab(e) {
                this.chooseList = [];
                let tabIndex = this.tabCurrentIndex;
				this.tabCurrentIndex = e.detail.current
                let navItem = this.navList[tabIndex];
                let list = navItem.list;
                list.forEach(item => {
                    item.checked = false;
                })

                console.log(e)


                // 获取列表
                this.$api.get({
                    url: '/store/product/productList',
                    data: {},
                    success: res => {
                        // this.navTitleList.forEach(item => {
                        //     item.count = res[item.key + "_count"];
                        //     item.text_show = `${item.text}(${item.count})`
                        // })
                        // this.tabCurrentIndex = e.target.current;
                        this.loadData('tabChange');

                    }
                });




            },
            //顶部tab点击
            tabClick(index) {
                this.chooseList = [];
                let tabIndex = this.tabCurrentIndex;
                let navItem = this.navList[tabIndex];
                let list = navItem.list;
                list.forEach(item => {
                    item.checked = false;
                })

                this.tabCurrentIndex = index;

                console.log('method')

            },
            //删除订单
            deleteOrder(order_id, key) {
                uni.showLoading({
                    title: '请稍后'
                });
                this.$api.post({
                    url: '/wanlshop/order/delOrder',
                    data: {
                        id: order_id
                    },
                    success: res => {
                        this.navList[this.tabCurrentIndex].orderList.splice(key, 1);
                        uni.hideLoading();
                    }
                });
            },
            //取消订单- 设置为7 -全局
            cancelOrder(item) {
                uni.showLoading({
                    title: '请稍后'
                });
                // 获取列表
                this.$api.post({
                    url: '/wanlshop/order/cancelOrder',
                    data: {
                        id: item.id
                    },
                    success: res => {
                        let {
                            stateTip,
                            stateTipColor
                        } = this.orderStateExp(7);
                        item = Object.assign(item, {
                            state: 7,
                            stateTip,
                            stateTipColor
                        });
                        this.$store.commit('statistics/order', {
                            pay: this.$store.state.statistics.order.pay - 1,
                            whole: this.$store.state.statistics.order.whole - 1
                        });
                        // 取消订单后删除待付款中该项，并修改全部中的状态 1.0.2升级
                        let list = this.navList[1].orderList;
                        let index = list.findIndex(val => val.id === item.id);
                        index !== -1 && list.splice(index, 1);
                        // 删除后修改全部中的为7
                        if (this.tabCurrentIndex == 1) {
                            let list = this.navList[0].orderList;
                            let index = list.findIndex(val => val.id === item.id);
                            if (index !== -1) {
                                list[index].state = 7;
                            }
                        }
                        uni.hideLoading();
                    }
                });
            },
            commentOrder(id) {
                this.$wanlshop.to('/pages/user/order/comment?order_id=' + id);
            },
            //支付订单
            paymentOrder(id) {
                this.$wanlshop.to(`/pages/user/money/pay?order_id=${id}&order_type=goods`);
            },
            //确认收货- 全局
            confirmOrder(item) {
                uni.showLoading({
                    title: '请稍后'
                });
                // 获取列表
                this.$api.post({
                    url: '/wanlshop/order/confirmOrder',
                    data: {
                        id: item.id
                    },
                    success: res => {
                        let {
                            stateTip,
                            stateTipColor
                        } = this.orderStateExp(4);
                        item = Object.assign(item, {
                            state: 4,
                            stateTip,
                            stateTipColor
                        });
                        this.$store.commit('statistics/order', {
                            receiving: this.$store.state.statistics.order.receiving - 1,
                            evaluate: this.$store.state.statistics.order.evaluate + 1
                        });
                        uni.hideLoading();
                    }
                });
            },
            //订单状态文字和颜色
            orderStateExp(state) {
                let stateTip = '',
                    stateTipColor = '#333';
                switch (+state) {
                    case 1:
                        stateTip = '等待支付';
                        stateTipColor = '#f40';
                        break;
                    case 2:
                        stateTip = '等待卖家发货';
                        break;
                    case 3:
                        stateTip = '卖家已发货';
                        break;
                    case 4:
                        stateTip = '交易成功';
                        break;
                    case 5:
                        stateTip = '交易成功';
                        break;
                    case 6:
                        stateTip = '已完成';
                        break;
                    case 7:
                        stateTip = '订单已关闭';
                        stateTipColor = '#777';
                        break;
                    case 8:
                        stateTip = '商家已接单';
                        break;
                    case 9:
                        stateTip = '已到达自提点';
                        break;
                        //更多自定义
                }
                return {
                    stateTip,
                    stateTipColor
                };
            },
            getRefund(status) {
                return ["退款", "退款中", "待退货", "退款完成", "退款关闭", "退款被拒"][status];
            },
            // 修改地址
            editAddress(id) {
                this.$wanlshop.to('/pages/user/address/address?source=2&order_id=' + id);
            },
            //添加或修改成功之后回调
            async refreshList(address_id, order_id) {
                uni.showLoading({
                    title: '正在提交新地址'
                });
                // 获取列表
                this.$api.post({
                    url: '/wanlshop/order/editOrderAddress',
                    data: {
                        id: order_id,
                        address_id: address_id
                    },
                    success: res => {
                        this.$wanlshop.msg('地址修改成功');
                        uni.hideLoading();
                    }
                });
            },
            choose(goods, index) {
                console.log(goods, index)
                let tabIndex = this.tabCurrentIndex;
                let navItem = this.navList[tabIndex];
                console.log(navItem.list)
                let list = navItem.list;
                let isChecked = list[index].checked ?? false;
                list[index].checked = !isChecked;
                if (list[index].checked) {
                    this.chooseList.push(goods.id)
                } else {
                    this.chooseList.splice(this.chooseList.indexOf(goods.id, 1))
                }

                console.log(this.chooseList)
                this.ts = (new Date()).getTime();
            },
            normal_a(goods, index) {
                console.log(goods, index)
                this.$api.post({
                    url: '/store/product/edit',
                    data: {
                        ids: [goods.id],
                        status: 'normal'
                    },
                    success: res => {
                        console.log(res)
                        this.$wanlshop.msg('提交成功')
                        setTimeout(() => {
                            this.remove_from_list(index)
                        }, 1400)
                    }
                });

            },
            hidden_a(goods, index) {
                console.log(goods, index)
                this.$api.post({
                    url: '/store/product/edit',
                    data: {
                        ids: [goods.id],
                        status: 'hidden'
                    },
                    success: res => {
                        this.$wanlshop.msg('商品已下架')
                        setTimeout(() => {
                            this.remove_from_list(index)
                        }, 1400)
                    }
                });
            },
            remove_a(goods, index) {
                console.log(goods, index)
                let that = this;
                uni.showModal({
                    title: '提示',
                    content: `确定删除商品 ${goods.title}`,
                    success: function(res) {
                        if (res.confirm) {
                            console.log('用户点击确定');
                            that.$api.post({
                                url: '/store/product/del',
                                data: {
                                    ids: [goods.id],
                                },
                                success: res => {
                                    that.$wanlshop.msg('商品已删除')
                                    setTimeout(() => {
                                        that.remove_from_list(index)
                                    }, 1400)
                                }
                            });
                        }
                    }
                })
            },
            remove_from_list(index) {
                let tabIndex = this.tabCurrentIndex;
                let navItem = this.navList[tabIndex];
                navItem.list.splice(index, 1)
            }
        }
    };
</script>

<style lang="scss" scoped>
	.wanl-order-list{
		height: 100vh;
	}
    @import "@/all.scss";

    page {
        height: 100%;
    }

    .wanl-cart-foot {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 997;
        min-height: 52px;
        background-color: #ffffff;
        padding: 0 12px;
    }

    .wanl-cart-goods {
        background-color: #ffffff;

        .picture {
            width: 180rpx;
            height: 180rpx;
            border-radius: 16rpx 16rpx 16rpx 16rpx;
        }

        .content {
            .title {
                font-size: 28rpx;
                color: #333333;
                line-height: 40rpx;
            }

            .count {
                font-weight: 500;
                font-size: 24rpx;
                color: #757575;
                line-height: 34rpx;
                color: #757575;
            }

            .price {
                font-weight: 400;
                font-size: 24rpx;
                color: #FF4900;
                line-height: 34rpx;
            }
        }
    }

    .wanl-cart-foot {
        .cu-btn:not(:nth-child(1)) {
            margin-left: 16rpx;
        }
    }
</style>